<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片收集册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#ec4899',
                        card: '#ffffff',
                        rare: '#f59e0b',
                        epic: '#8b5cf6',
                        legendary: '#d97706'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .card-shadow {
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            }
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }
            .shine-effect {
                position: relative;
                overflow: hidden;
            }
            .shine-effect::after {
                content: '';
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.3) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                transform: rotate(30deg);
                animation: shine 3s infinite;
            }
            @keyframes shine {
                0% { transform: translateX(-100%) rotate(30deg); }
                100% { transform: translateX(100%) rotate(30deg); }
            }
            .card-reveal {
                animation: reveal 0.5s ease-out forwards;
            }
            @keyframes reveal {
                0% { transform: scale(0) rotate(-10deg); opacity: 0; }
                70% { transform: scale(1.1) rotate(5deg); }
                100% { transform: scale(1) rotate(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-sans">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-diamond text-primary text-2xl"></i>
                <h1 class="text-xl md:text-2xl font-bold text-gray-800">卡片收集册</h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="hidden md:flex items-center space-x-1">
                    <i class="fa fa-trophy text-rare"></i>
                    <span class="font-medium" id="collection-count">已收集: 0/0</span>
                </div>
                <button id="info-btn" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-info-circle text-gray-600"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 欢迎消息 -->
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">开始你的卡片收集之旅</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">点击下方按钮获取随机卡片，收集所有不同类型的卡片，成为收藏大师！</p>
        </div>
        
        <!-- 抽卡区域 -->
        <div class="flex flex-col items-center justify-center mb-12">
            <button id="draw-card-btn" class="bg-primary hover:bg-primary/90 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center space-x-2 shine-effect">
                <i class="fa fa-magic"></i>
                <span>抽取卡片</span>
            </button>
            <p class="text-gray-500 mt-3 text-sm">每次抽取都可能获得普通、稀有、史诗或传说级卡片</p>
        </div>
        
        <!-- 最新获得的卡片 -->
        <div id="latest-card-container" class="mb-12 flex justify-center items-center min-h-[300px]">
            <div class="text-center text-gray-500">
                <i class="fa fa-card text-5xl mb-3 opacity-30"></i>
                <p>抽取的卡片将显示在这里</p>
            </div>
        </div>
        
        <!-- 收集的卡片展示 -->
        <div class="mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-collection text-primary mr-2"></i>
                我的收藏
            </h3>
            <div id="card-collection" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
                <!-- 卡片将通过JavaScript动态添加 -->
                <div class="col-span-full text-center py-12 text-gray-500">
                    <p>你的收藏是空的，快去抽取第一张卡片吧！</p>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 信息模态框 -->
    <div id="info-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
        <div class="bg-white rounded-lg shadow-2xl max-w-md w-full mx-4 p-6 transform transition-all">
            <div class="flex justify-between items-start mb-4">
                <h3 class="text-xl font-bold text-gray-800">关于卡片收集</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="space-y-3 text-gray-600">
                <p>这是一个简单的卡片收集游戏，你可以通过点击"抽取卡片"按钮获得随机卡片。</p>
                <p>卡片分为四个稀有度等级：</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li>普通 (白色)</li>
                    <li>稀有 (金色)</li>
                    <li>史诗 (紫色)</li>
                    <li>传说 (橙色)</li>
                </ul>
                <p>尝试收集所有不同的卡片，完成你的收藏册！</p>
            </div>
            <div class="mt-6">
                <button id="ok-modal" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded w-full transition-colors">
                    开始收集
                </button>
            </div>
        </div>
    </div>

    <footer class="bg-gray-800 text-white py-6">
        <div class="container mx-auto px-4 text-center">
            <p>卡片收集册 &copy; 2023</p>
            <p class="text-sm text-gray-400 mt-1">一个简单的网页挂挂卡应用</p>
        </div>
    </footer>

    <script>
        // 卡片数据
        const cardData = [
            { id: 1, name: "火焰精灵", type: "元素", rarity: "common", description: "掌控火焰力量的小精灵" },
            { id: 2, name: "水之使者", type: "元素", rarity: "common", description: "能召唤水流的神秘使者" },
            { id: 3, name: "风之行者", type: "元素", rarity: "common", description: "随风而行的迅捷生物" },
            { id: 4, name: "大地守卫", type: "元素", rarity: "rare", description: "守护大地的坚固卫士" },
            { id: 5, name: "雷电使者", type: "元素", rarity: "rare", description: "掌控雷电之力的强大存在" },
            { id: 6, name: "光明使者", type: "神圣", rarity: "epic", description: "带来光明与希望的使者" },
            { id: 7, name: "暗影猎手", type: "暗影", rarity: "epic", description: "潜伏在黑暗中的猎手" },
            { id: 8, name: "龙骑士", type: "战士", rarity: "legendary", description: "驾驭巨龙的传奇战士" },
            { id: 9, name: "魔法导师", type: "法师", rarity: "rare", description: "掌握古老魔法的智者" },
            { id: 10, name: "森林守护者", type: "自然", rarity: "common", description: "守护森林平衡的精灵" },
            { id: 11, name: "海洋之王", type: "海洋", rarity: "legendary", description: "统治所有海洋生物的王者" },
            { id: 12, name: "星空法师", type: "法师", rarity: "epic", description: "能召唤星辰力量的法师" }
        ];

        // 存储用户收集的卡片
        let collectedCards = JSON.parse(localStorage.getItem('collectedCards')) || [];
        
        // DOM元素
        const drawCardBtn = document.getElementById('draw-card-btn');
        const latestCardContainer = document.getElementById('latest-card-container');
        const cardCollection = document.getElementById('card-collection');
        const collectionCount = document.getElementById('collection-count');
        const infoBtn = document.getElementById('info-btn');
        const infoModal = document.getElementById('info-modal');
        const closeModal = document.getElementById('close-modal');
        const okModal = document.getElementById('ok-modal');

        // 初始化页面
        updateCollectionDisplay();
        updateCollectionCount();

        // 事件监听
        drawCardBtn.addEventListener('click', drawRandomCard);
        infoBtn.addEventListener('click', () => {
            infoModal.classList.remove('hidden');
            infoModal.classList.add('flex');
        });
        
        closeModal.addEventListener('click', closeInfoModal);
        okModal.addEventListener('click', closeInfoModal);
        
        // 点击模态框外部关闭
        infoModal.addEventListener('click', (e) => {
            if (e.target === infoModal) {
                closeInfoModal();
            }
        });

        // 关闭信息模态框
        function closeInfoModal() {
            infoModal.classList.add('hidden');
            infoModal.classList.remove('flex');
        }

        // 随机抽取一张卡片
        function drawRandomCard() {
            // 禁用按钮防止连续点击
            drawCardBtn.disabled = true;
            drawCardBtn.classList.add('opacity-70', 'cursor-not-allowed');
            
            // 随机选择一张卡片
            const randomIndex = Math.floor(Math.random() * cardData.length);
            const drawnCard = cardData[randomIndex];
            
            // 显示抽取动画
            latestCardContainer.innerHTML = `
                <div class="text-center">
                    <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary mx-auto mb-4"></div>
                    <p class="text-gray-600">正在抽取卡片...</p>
                </div>
            `;
            
            // 延迟显示结果，增加期待感
            setTimeout(() => {
                displayLatestCard(drawnCard);
                
                // 检查是否已收集，如果没有则添加到收藏
                if (!collectedCards.some(card => card.id === drawnCard.id)) {
                    collectedCards.push(drawnCard);
                    localStorage.setItem('collectedCards', JSON.stringify(collectedCards));
                    updateCollectionDisplay();
                    updateCollectionCount();
                }
                
                // 恢复按钮状态
                drawCardBtn.disabled = false;
                drawCardBtn.classList.remove('opacity-70', 'cursor-not-allowed');
            }, 1500);
        }

        // 显示最新获得的卡片
        function displayLatestCard(card) {
            // 根据稀有度设置样式类
            const rarityClasses = {
                common: 'border-gray-300 bg-card',
                rare: 'border-rare bg-rare/5',
                epic: 'border-epic bg-epic/5',
                legendary: 'border-legendary bg-legendary/5'
            };
            
            const rarityLabels = {
                common: '普通',
                rare: '稀有',
                epic: '史诗',
                legendary: '传说'
            };
            
            const rarityBadgeClasses = {
                common: 'bg-gray-200 text-gray-800',
                rare: 'bg-rare text-white',
                epic: 'bg-epic text-white',
                legendary: 'bg-legendary text-white'
            };

            latestCardContainer.innerHTML = `
                <div class="w-full max-w-md">
                    <div class="card-shadow rounded-lg overflow-hidden ${rarityClasses[card.rarity]} card-reveal">
                        <div class="h-48 bg-gradient-to-r from-primary/20 to-primary/5 flex items-center justify-center">
                            <i class="fa fa-diamond text-6xl text-primary/70"></i>
                        </div>
                        <div class="p-5">
                            <div class="flex justify-between items-start mb-3">
                                <h3 class="text-xl font-bold text-gray-800">${card.name}</h3>
                                <span class="text-xs font-medium px-2.5 py-0.5 rounded ${rarityBadgeClasses[card.rarity]}">
                                    ${rarityLabels[card.rarity]}
                                </span>
                            </div>
                            <p class="text-sm text-gray-500 mb-3">类型: ${card.type}</p>
                            <p class="text-gray-600 text-sm">${card.description}</p>
                            
                            <div class="mt-4 pt-4 border-t border-gray-100">
                                ${collectedCards.some(c => c.id === card.id) 
                                    ? '<p class="text-sm text-green-600 flex items-center"><i class="fa fa-check-circle mr-1"></i> 已添加到收藏</p>'
                                    : '<p class="text-sm text-blue-600 flex items-center"><i class="fa fa-plus-circle mr-1"></i> 新卡片！已添加到收藏</p>'}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 更新收藏展示
        function updateCollectionDisplay() {
            if (collectedCards.length === 0) {
                cardCollection.innerHTML = `
                    <div class="col-span-full text-center py-12 text-gray-500">
                        <p>你的收藏是空的，快去抽取第一张卡片吧！</p>
                    </div>
                `;
                return;
            }
            
            // 清空收藏展示区
            cardCollection.innerHTML = '';
            
            // 根据稀有度排序卡片（从高到低）
            const rarityOrder = { legendary: 4, epic: 3, rare: 2, common: 1 };
            const sortedCards = [...collectedCards].sort((a, b) => 
                rarityOrder[b.rarity] - rarityOrder[a.rarity]
            );
            
            // 添加卡片到展示区
            sortedCards.forEach(card => {
                const rarityBadgeClasses = {
                    common: 'bg-gray-200 text-gray-800',
                    rare: 'bg-rare text-white',
                    epic: 'bg-epic text-white',
                    legendary: 'bg-legendary text-white'
                };
                
                const cardElement = document.createElement('div');
                cardElement.className = 'bg-white rounded-lg overflow-hidden card-shadow card-hover';
                cardElement.innerHTML = `
                    <div class="h-32 bg-gradient-to-r from-primary/10 to-primary/5 flex items-center justify-center">
                        <i class="fa fa-diamond text-4xl text-primary/60"></i>
                    </div>
                    <div class="p-3">
                        <div class="flex justify-between items-start mb-1">
                            <h4 class="font-bold text-gray-800 text-sm truncate">${card.name}</h4>
                            <span class="text-xs font-medium px-1.5 py-0.25 rounded ${rarityBadgeClasses[card.rarity]}">
                                ${card.rarity === 'common' ? '普通' : 
                                  card.rarity === 'rare' ? '稀有' : 
                                  card.rarity === 'epic' ? '史诗' : '传说'}
                            </span>
                        </div>
                        <p class="text-xs text-gray-500">${card.type}</p>
                    </div>
                `;
                
                cardCollection.appendChild(cardElement);
            });
        }

        // 更新收藏计数
        function updateCollectionCount() {
            collectionCount.textContent = `已收集: ${collectedCards.length}/${cardData.length}`;
        }

        // 页面滚动效果 - 导航栏变化
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });
    </script>
</body>
</html>
